
   <!-- <nav>
      <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
      <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
      <a >Admin</a>
      <a>Login</a>
      <a >Contact</a>
    </nav> -->
    <header>
			<!-- Header Menu Area -->
			<div class="menu-area mt-60" >
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-sm-12">
							<div class="logo-area text-center text-uppercase" [style.marginTop] = "titleCtrl ? '0px': '0px'">
								<a href="index.html"><img src="assets/img/icon/logo.png" alt="" /></a>
							</div>
						</div>
						<div class="col-md-9 col-sm-12">
							<div class="main-menu lemon-bg">
								<nav>
									<ul id="nav">
										<li *ngFor="let navDataItem of navDatas ">
											<a (click)="PCMenuCtrl(navDataItem)">{{navDataItem.name}}</a>
												<ul *ngIf="navDataItem.hasChild">
													<li *ngFor="let navDataItemOption of navDataItem.options ">
														<a routerLink="/{{navDataItemOption.link}}" routerLinkActive="active"><i class="arrow_carrot-right"></i> {{navDataItemOption.optionName}}</a>
													</li>
												</ul>
										</li>
									</ul>
								</nav>
								<!-- Product Cart -->
								<div class="menu-right-area">
									<a href="#" class="mini-cart-icon">
										<i class="icon_cart_alt"></i>
										<span>2</span>
									</a>
									<div class="top-cart-content">
										<!-- Cart Single -->
										<div class="media header-middle-checkout">
											<div class="media-left check-img">
												<a href="#">
													<img alt="" src="assets/img/other/cart-1.jpg">
												</a>
											</div>
											<div class="media-body checkout-content">
												<h4 class="media-heading">
													<a href="#">Men Fashion Spray</a>
													<span title="Remove This Item" class="btn-remove checkout-remove">
														<i class="fa fa-trash"></i>
													</span>
												</h4>
												<p>1 x $111.00</p>
											</div>
										</div>

										<div class="media header-middle-checkout">
											<div class="media-left check-img">
												<a href="#">
													<img alt="" src="assets/img/other/cart-2.jpg">
												</a>
											</div>
											<div class="media-body checkout-content">
												<h4 class="media-heading">
													<a href="#">Women Fashion Bag</a>
													<span title="Remove This Item" class="btn-remove checkout-remove">
														<i class="fa fa-trash"></i>
													</span>
												</h4>
												<p>3 x $125.00</p>
											</div>
										</div>
										<!-- Cart Single -->
										<div class="actions">
											<button type="button" title="Checkout-botton" class="Checkout-botton">
												<span>Checkout</span>
											</button>
										</div>
									</div>
								</div>
								<!-- Product Cart -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Header Menu Area -->
			<!-- Header Slider Area -->
			<div class="slider-area">
		
				<div class="bend niceties preview">
					<div id="ensign-nivoslider" class="slides">	

						<img src="{{bannerUrl}}" alt="" title="#slider-direction-1" [style.maxWidth] = "titleCtrl ? '150%': '250%'" />
					<!-- 	<h1 class="title1 bigHide" *ngIf="!titleCtrl" [class.smallTitle]="!titleCtrl">{{title}}</h1> -->
					</div>
					<!-- direction 1 -->
					<div id="slider-direction-1" class="slider-direction">
						<div class="slider-content text-center s-tb slider-1" >
							<div class="title-container s-tb-c title-compress">
								<h2 class="title2">
									<span class="icon-left" data-icon="&#x7b;"></span>
										exclusive & glamours looks
									<span class="icon-right" data-icon="&#x7b;"></span>
								</h2>
								<h1 class="title1" [innerHTML]="title">sopzon 2017 collections</h1>
								<div class="slider-btn text-uppercase" *ngIf="titleCtrl">
									<a href="#">View All <span class="icon-left" data-icon="&#x24;"></span></a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div style="height: 50px" *ngIf="!titleCtrl"></div>
			<!-- Header Slider Area -->
			<!-- MOBILE-MENU-AREA START --> 
			<div class="mobile-menu-area" [style.marginTop] = "titleCtrl ? '-16px': '-70px'">
				<div class="container mean-container"><div class="mean-bar">
					<a class="meanmenu-reveal" style="right: 0px; left: auto; text-align: center; text-indent: 0px; font-size: 18px;" (click)="meanNavCtrl()">
						<span></span><span></span><span></span>
					</a>
					<nav class="mean-nav">
						<ul *ngIf="meanNavFlag">
							<li *ngFor="let navDataItem of navDatas ">
								<a (click)="mobileMenuCtrl(navDataItem)">{{navDataItem.name}} </a>
								<ul *ngIf="navDataItem.hasChild" [style.display]="navDataItem.hideChild ? 'block' : 'none'">
									<li *ngFor="let navDataItemOption of navDataItem.options">
										<a routerLink="/{{navDataItemOption.link}}" routerLinkActive="active"  (click)="closeMobileMenuCtrl()">{{navDataItemOption.optionName}}</a>
									</li>
								</ul>
								<a class="mean-expand" href="#" style="font-size: 18px" *ngIf="navDataItem.hasChild">+</a>
							</li>
											
						</ul>
					</nav>
					</div>
				</div>
			</div>
			<!-- MOBILE-MENU-AREA END  -->
		</header>


    <router-outlet></router-outlet>

     <!-- Fotter Area Start -->

		<footer>
			<!-- Footer Top Area End -->
			<div class="fotter-area dark-gray-bg ptb-100">
				<div class="container">
					<div class="row">
						<div class="col-md-3 col-sm-4 col-xs-12">
							<div class="address-area res-mb-sm-30">
								<a href="index.html">shopzon</a>
								<p>Lorem ipsum dolor sit amet, consemi cteta dipisi cing elit, sed do eiusmod tempor.</p>
								<div class="contact-social mt-40">
									<ul>
										<li>
											<a href="#" class="social_facebook "></a>
										</li>
										<li>
											<a href="#" class="social_twitter "></a>
										</li>
										<li>
											<a href="#" class="social_googleplus"></a>
										</li>
										<li>
											<a href="#" class="social_linkedin "></a>
										</li>
										<li>
											<a href="#" class="social_instagram "></a>
										</li>
									</ul>
								</div>
							</div>
						</div>
						<div class="col-md-3 col-sm-4 col-xs-12">
							<div class="footer-menu res-mb-sm-30">
								<h4>MY ACCOUNT</h4>
								<ul>
									<li><a href="#">FAQs</a></li>
									<li><a href="#">Payments</a></li>
									<li><a href="#">Track Your Order</a></li>
									<li><a href="#">Return Polcy</a></li>
									<li><a href="#">Warranty</a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-3 hidden-sm hidden-xs">
							<div class="footer-menu">
								<h4>SHOP GUIDE</h4>
								<ul>
									<li><a href="#">Hot Sale</a></li>
									<li><a href="#">Best Sellar</a></li>
									<li><a href="#">Suppliers</a></li>
									<li><a href="#">Our Store</a></li>
									<li><a href="#">Deal of The Day</a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-3 col-sm-4 col-xs-12">
							<div class="footer-menu">
								<h4>CONTACT INFO</h4>
								<div class="contact-details">
									<ul>
										<li>
											<span class="icon_pin"></span>
											<p>Lusmod tempor incididunt</p>
										</li>
										<li>
											<span class="icon_mail"></span>
											<p>Lusmod incidiunt wesbvu</p>
										</li>
										<li>
											<span class="icon_phone "></span>
											<p>(256) 987 654 321</p>
										</li>
										<li>
											<span class="icon_clock_alt"></span>
											<p>8.00 am-6.00 pm</p>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Footer Top Area End -->
			<!-- Footer Bottom Area Start -->
			<div class="footer-bottom-area black-bg">
				<div class="container">
					<div class="row ">
						<div class="col-md-6 col-sm-6 col-xs-12">
							<p>Copyright &copy; 2017.Company name All rights reserved.</p>
						</div>
						<div class="col-md-6 col-sm-6 col-xs-12">
							<img src="assets/img/icon/payment.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<!-- Footer Bottom Area End -->
		</footer>
        <!-- Fotter Area End -->

        <a id="scrollUp" style="position: fixed; z-index: 2147483647;" *ngIf="toTop" ><i class="fa fa-angle-up"></i></a>
